<template>
	<view class="pendingPayment flex-column">
		<view class="backgroundImg" v-if="orderInfo">
			<view class="flex-start-center">
				<view v-if="orderInfo.status==1">
					<view class="sk-chase">
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
					</view>
				</view>
				<view class="margin-left_38rpx"
					style="color: rgb(255, 255, 255);font-size: 36rpx;font-weight: 600;margin-right: 20rpx;">
					{{orderStatusFn(orderInfo.status)}}
				</view>
				<!-- <view style="color: rgb(255, 255, 255);font-size: 24rpx;">剩余：2024-03-30 16:00:31</view> -->
			</view>

			<view style="margin-top: 35rpx;">
				<text v-if="orderInfo.status==1"
					style="color: rgb(255, 255, 255);font-size: 28rpx;">请完成支付操作，方可配送到您手上</text>
				<text v-if="orderInfo.status==3" style="color: rgb(255, 255, 255);font-size: 28rpx;">商品待发货请耐心等待</text>

				<text v-if="orderInfo.status==5"
					style="color: rgb(255, 255, 255);font-size: 28rpx;">商品退款中,商家真正审核中请耐心等待</text>
				<text v-if="orderInfo.status==6" style="color: rgb(255, 255, 255);font-size: 28rpx;">商品已经完成欢迎下次光临</text>
				<text v-if="orderInfo.status==7"
					style="color: rgb(255, 255, 255);font-size: 28rpx;">商品已退款抱歉给您带来不便</text>
				<text v-if="orderInfo.status==8" style="color: rgb(255, 255, 255);font-size: 28rpx;">订单已取消</text>
			</view>
			<view class="pendingPayAddress flex-column-between">
				<view>


					<view v-if="orderInfo.take_over_way==2">
						<view class="flex-start-center" v-if="orderInfo.address_name&&orderInfo.address_phone">
							<image class="iconAddress" src="../../static/套餐卡背景/path.png" mode=""></image>
							<text style="font-size: 16px">{{orderInfo.address_name}}</text>
							<text style="font-size: 16px">{{maskedPhoneNumber(Number(orderInfo.address_phone))}}</text>
						</view>
						<view style="height: 100rpx;" class="flex" v-else>
							在线扫码购买商品
						</view>
					</view>
					<view v-if="orderInfo.take_over_way==1">
						<view class="flex-start-center" v-if="orderInfo.store_name&&orderInfo.store_phone">
							<image class="iconAddress" src="../../static/套餐卡背景/path.png" mode=""></image>
							<text style="font-size: 16px">{{orderInfo.store_name }}</text>
							<text style="font-size: 16px">{{maskedPhoneNumber(Number(orderInfo.store_phone))}}</text>
						</view>
						<view style="height: 100rpx;" class="flex" v-else>
							在线扫码购买商品
						</view>
					</view>
				</view>
				<view v-if="orderInfo.take_over_way==2" style="color: rgb(153, 153, 153);">
					<view v-if="orderInfo.address_province_name&&orderInfo.address_city_name">
						地址：{{orderInfo.address_province_name}}{{orderInfo.address_city_name}}{{orderInfo.address_county_name}}{{orderInfo.address_address}}
					</view>

				</view>
				<view v-if="orderInfo.take_over_way==1" style="color: rgb(153, 153, 153);">
					<view v-if="orderInfo.store_province_name&&orderInfo.store_city_name">
						地址：{{orderInfo.store_province_name}}{{orderInfo.store_city_name}}{{orderInfo.store_county_name}}{{orderInfo.store_address}}
					</view>
				</view>
			</view>
			<!-- <view class="pendingPayAddress flex-column-between" v-if="orderInfo.take_over_way==2">
				<view class="flex-start-center">
					<image class="iconAddress" src="../../static/套餐卡背景/path.png" mode=""></image>
					<view class="">
						<text style="font-size: 16px">{{orderInfo.address_name}}</text>
						<text style="font-size: 16px">{{maskedPhoneNumber(orderInfo.address_phone)}}</text>
					</view>
			
				</view>
				<view style="color: rgb(153, 153, 153);">
					地址：{{orderInfo.address_province_name}}{{orderInfo.address_city_name}}{{orderInfo.address_county_name}}{{orderInfo.address}}
				</view>
			</view> -->
		</view>
		<!--待支付详情  -->
		<view class="pendingPayDetail ">
			<view class="orderPageDescribe flex-start" v-if="orderInfo">
				<view>
					<image class="img" :src="orderInfoList.host_img[0]" mode=""></image>
				</view>
				<view class="flex-column-between-start margin-left_10rpx" style="height: 232rpx ;width: 401rpx;">
					<view class="font-overflow2">
						{{orderInfoList.goods_name}}
					</view>
					<view style="color: rgb(153, 153, 153);width: 100%;" class="font-overflow">
						<text>{{orderInfoList.goods_name}}</text>
					</view>
					<view class="example-body">
						<view style="color: rgb(153, 153, 153);">
							数量*{{orderInfo.number}}
						</view>
					</view>

					<view style="color: rgb(0, 124, 255);">
						￥{{orderInfo.total_price}}
					</view>
				</view>


			</view>
			<!-- 联系客户 -->
			<view v-if="orderInfo.take_over_way==1" class="flex customerService"
				@click.stop="paste(orderInfo.store_phone)">
				联系客户
			</view>
			<!--  -->
			<view v-if="orderInfo.take_over_way==2" class="flex customerService"
				@click.stop="paste(orderInfo.address_phone)">
				联系客户
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="orderDetail " v-if="orderInfo">
			<view class="margin-bottom_40rpx">
				<text class="color_999999 ">订单编号：</text>
				<text>{{orderInfo.sn_order}}</text>
			</view>
			<view class="margin-bottom_40rpx ">
				<text class="color_999999 ">下单时间：</text>
				<text>{{orderInfo.create_time}}</text>
			</view>
			<view class="margin-bottom_40rpx">
				<text class="color_999999 "> 支付方式：</text>
				<text>{{payStatusFn(orderInfo.pay_way)}}</text>
			</view>
			<view class="margin-bottom_40rpx" v-if="orderInfo.remark">
				<text class="color_999999 "> 备注：</text>
				<text>{{orderInfo.remark}}</text>
			</view>
			<view class="margin-bottom_40rpx"
				v-if="(orderInfo.status!=1&&orderInfo.status!=2&&orderInfo.status!=3)&&orderInfo.take_over_way!=1">
				<text class="color_999999 ">送货人：</text>
				<text>{{orderInfo.express_name}}</text>
			</view>
			<view class="margin-bottom_40rpx"
				v-if="(orderInfo.status!=1&&orderInfo.status!=2&&orderInfo.status!=3)&&orderInfo.take_over_way!=1">
				<text class="color_999999 ">送货电话：</text>
				<text>{{orderInfo.express_phone}} </text>
			</view>
			<view class="margin-bottom_40rpx flex-between">
				<text class="color_999999 ">价格：</text>
				<text style="color: rgb(0, 124, 255);font-weight: 800;">￥{{orderInfo.total_price}}</text>
			</view>
			<view class="margin-bottom_40rpx flex-between">
				<text class="color_999999 ">会员折扣：</text>
				<text style="color: rgb(0, 124, 255);font-weight: 800;">{{orderInfo.discount_ratio/10}}折 </text>
			</view>
			<view class="margin-bottom_40rpx flex-between" v-if="orderInfo.discount_intensity">
				<text class="color_999999 ">优惠卷折扣价格：</text>
				<text style="color: rgb(0, 124, 255);font-weight: 800;">￥{{orderInfo.coupon_deduction_amount}} </text>
			</view>
			<view class="margin-bottom_40rpx flex-between">
				<text class="color_999999 ">优惠：</text>
				<text style="color: rgb(0, 124, 255);font-weight: 800;">￥{{orderInfo.discount_amount}} </text>
			</view>
			<view class="margin-bottom_40rpx flex-between" v-if="orderInfo.discount_intensity">
				<text class="color_999999 ">优惠券：</text>
				<text style="color: rgb(0, 124, 255);font-weight: 800;">-￥{{orderInfo.discount_intensity}} </text>
			</view>
			<view class="margin-bottom_40rpx flex-between">
				<text class="color_999999 ">积分折扣：</text>
				<text style="color: rgb(0, 124, 255);font-weight: 800;">-￥{{orderInfo.point_deduction_amount}} </text>
			</view>
			<view class="margin-bottom_40rpx flex-end">
				<text class="color_999999 "></text>
				<text style="font-size: 28rpx ;font-weight: 800;">实付款： </text>
				<text
					style="color: rgb(0, 124, 255);font-size: 28rpx ;font-weight: 800;">{{orderInfo.reality_amount}}</text>
			</view>
		</view>

		<view class="favor">

		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				orderInfo: null,
				orderInfoList: null,
				token: uni.getStorageSync('login').token,
			}
		},
		onLoad(options) {
			console.log(options)
			if (Object.keys(options).length) {
				this.orderInfoList = options
				console.log(this.orderInfoList.host_img)
				this.orderInfoList.host_img = this.orderInfoList.host_img.split(',').map((item) => item.trim());
				this.init(options.id)
			}
		},
		methods: {
			paste(orderNumber) {
				this.$sun.phone(orderNumber)
				// uni.setClipboardData({
				// 	data: orderNumber
				// });
			},
			async init(id) {
				console.log(id)

				const result = await this.$http.post({
					url: this.$api.goodsOrderInfo,
					data: {
						id: id

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.orderInfo = result.data


				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			submitOrder() {

				this.$sun.navRe('/pages/shop/orderSuccess/orderSuccess')


			}
		},
		computed: {
			maskedPhoneNumber() {
				return function(numberBer) {

					// 将手机号中间四位替换为*
					const number = JSON.stringify(numberBer).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
					return number
				};
			},
			// 订单状态
			orderStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '待付款' : status == 1 ? '待付款' : status == 2 ? '已支付' : status == 3 ? '待发货' :
						status == 4 ? '待收货' : status == 5 ? '退款中' : status == 6 ? '已完成' : status == 7 ? '已退款' :
						'已取消';
					return orderStatus;
				};
			},
			payStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '余额支付' : status == 1 ? '余额支付' : status == 2 ? '微信在线支付' : status == 3 ?
						'微信线下充值' :
						status == 4 ? '支付宝充值' : status == 5 ? '现金充值' : status == 6 ? 'pos充值' : status == 7 ?
						'微信线上扫码充值' :
						'支付宝在线扫码充值';
					return orderStatus;
				};
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;


	}


	.sk-chase {
		width: 25px;
		height: 25px;
		position: relative;
		animation: sk-chase 2.5s infinite linear both;
	}

	.sk-chase-dot {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		animation: sk-chase-dot 2.0s infinite ease-in-out both;
	}

	.sk-chase-dot:before {
		content: '';
		display: block;
		width: 25%;
		height: 25%;
		background-color: #fff;
		border-radius: 100%;
		animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
	}

	.sk-chase-dot:nth-child(1) {
		animation-delay: -1.1s;
	}

	.sk-chase-dot:nth-child(2) {
		animation-delay: -1.0s;
	}

	.sk-chase-dot:nth-child(3) {
		animation-delay: -0.9s;
	}

	.sk-chase-dot:nth-child(4) {
		animation-delay: -0.8s;
	}

	.sk-chase-dot:nth-child(5) {
		animation-delay: -0.7s;
	}

	.sk-chase-dot:nth-child(6) {
		animation-delay: -0.6s;
	}

	.sk-chase-dot:nth-child(1):before {
		animation-delay: -1.1s;
	}

	.sk-chase-dot:nth-child(2):before {
		animation-delay: -1.0s;
	}

	.sk-chase-dot:nth-child(3):before {
		animation-delay: -0.9s;
	}

	.sk-chase-dot:nth-child(4):before {
		animation-delay: -0.8s;
	}

	.sk-chase-dot:nth-child(5):before {
		animation-delay: -0.7s;
	}

	.sk-chase-dot:nth-child(6):before {
		animation-delay: -0.6s;
	}

	@keyframes sk-chase {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes sk-chase-dot {

		80%,
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes sk-chase-dot-before {
		50% {
			transform: scale(0.4);
		}

		100%,
		0% {
			transform: scale(1.0);
		}
	}

	.pendingPayment {

		.backgroundImg {
			width: 100%;
			height: 374rpx;
			// position: absolute;
			// z-index: 9;
			// right: 20rpx;
			// top: 36rpx;
			background: url('../../static/套餐卡背景/矩形 1590.png');
			background-repeat: no-repeat;
			background-size: cover;
			// text-align: center;

			padding: 58rpx 36rpx 0;

			.pendingPayAddress {
				margin-top: 50rpx;
				border-radius: 20rpx;
				width: 672rpx;
				height: 192rpx;
				background: rgb(255, 255, 255);
				padding: 32rpx 32rpx;

				.iconAddress {
					width: 31.78rpx;
					height: 37.16rpx;
					margin-right: 10rpx;
				}
			}
		}

		.pendingPayDetail {
			padding: 16rpx;

			width: 672rpx;
			box-sizing: border-box;
			height: 362rpx;
			border-radius: 10px;
			background: rgb(255, 255, 255);
			margin-top: 74rpx;

			.orderPageDescribe {
				padding-bottom: 10rpx;
				border-bottom: 1px solid rgb(238, 238, 238);

				.img {
					width: 230.02rpx;
					height: 232rpx;
				}

			}

			.customerService {
				margin-top: 25rpx;
				color: rgb(51, 51, 51);

				font-size: 32rpx;
				font-weight: 400;
			}
		}

		.favor {
			height: 140rpx;
		}

		.orderDetail {
			padding: 54rpx 32rpx 15rpx 54rpx;

			width: 672rpx;
			box-sizing: border-box;

			border-radius: 10px;
			background: rgb(255, 255, 255);
			margin-top: 28rpx;
		}

		.sumbitOrder {
			width: 100%;
			height: 140rpx;
			padding: 0 30rpx;
			background: rgb(255, 255, 255);
			position: fixed;
			bottom: 0;
			z-index: 999;

			.orderBtn {
				border-radius: 148rpx;
				color: #ffffff;
				background: rgb(0, 124, 255);
				width: 240rpx;
				height: 88rpx;
			}

			.orderBtnCanel {
				margin-right: 20rpx;
				border-radius: 148rpx;
				color: rgb(51, 51, 51);
				background: rgb(241, 241, 241);
				width: 240rpx;
				height: 88rpx;
			}
		}
	}
</style>